<template>
  <div class="user-info-container">
    <el-card class="user-info-card" shadow="hover">
      <template #header>
        <div>
          <span>个人信息</span>
        </div>
      </template>
      <div class="user-info-body">
        <div style="text-align: center;">
          <el-upload
            class="avatar-uploader"
            :headers="headers"
            :action="action"
            name="avatar"
            :show-file-list="false"
            :on-success="onSuccess"
          >
            <el-avatar shape="square" :size="100" :src="avatar"/>
          </el-upload>
        </div>
        <el-divider />
        <div>
          <p class="user-info-item">
            <span>
              <el-icon><UserFilled /></el-icon>
              用户账号
            </span> <span>{{ userInfo.username }}</span>
          </p>
          <p class="user-info-item">
            <span>
              <el-icon><phone /></el-icon>
              电话号码
            </span> <span>{{ userInfo.telephone }}</span>
          </p>
          <p class="user-info-item">
            <span>
              <el-icon><message /></el-icon>
              邮箱地址
            </span> <span>{{ userInfo.email }}</span>
          </p>
          <p class="user-info-item">
            <span>
              <el-icon><location /></el-icon>
              居住地址
            </span> <span>{{ userInfo.address }}</span>
          </p>
          <p class="user-info-item">
            <span>
              <el-icon><timer /></el-icon>
              创建时间
            </span> <span>{{ userInfo.createTime }}
          </span></p>
        </div>
      </div>
    </el-card>
    <el-card class="update-info-card" shadow="hover">
      <template #header>
        <div>
          <span>基础资料</span>
        </div>
      </template>
      <div class="update-info-body">
        <el-tabs type="border-card">
          <el-tab-pane label="修改资料">
            <el-form
              label-position="left"
              label-width="100px"
              :model="updateUserInfoForm"
              :rules="userInfoRule"
              ref="userInfoForm"
            >
              <el-form-item label="用户名称" prop="userNike">
                <el-input v-model="updateUserInfoForm.userNike" />
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio v-model="updateUserInfoForm.sex" label="1" border>男</el-radio>
                <el-radio v-model="updateUserInfoForm.sex" label="0" border>女</el-radio>
              </el-form-item>
              <el-form-item label="手机号码" prop="telephone">
                <el-input v-model="updateUserInfoForm.telephone" />
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="updateUserInfoForm.email" />
              </el-form-item>
              <el-form-item label="居住地址" prop="address">
                <el-input v-model="updateUserInfoForm.address" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateUserInfo(userInfoForm)">保存</el-button>
                <el-button @click="outPage($router)">退出</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="修改密码">
            <el-form
              label-position="left"
              label-width="100px"
              :model="updatePwdForm"
              :rules="passwordRule"
              ref="passwordForm"
            >
              <el-form-item label="旧密码" prop="password">
                <el-input type="password" v-model="updatePwdForm.password" />
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="updatePwdForm.newPassword" />
              </el-form-item>
              <el-form-item label="确认密码" prop="truePassword">
                <el-input type="password" v-model="updatePwdForm.truePassword" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updatePassword(passwordForm)">保存</el-button>
                <el-button @click="outPage($router)">退出</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { updatePwdFormRule, updateUserInfoFormRule } from '@/datas/rules/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import { SetUserInfo, SetPassword } from '@/api/users'
import { useStore } from 'vuex'
const store = useStore()

const userInfo = ref(store.getters.userInfo)
const avatar = computed(() => store.getters.avatar)
// 退出该页面回到首页
const outPage = (router) => {
  store.commit('app/setUrlPath', '/')
  router.push('/')
}

// 文件上传的逻辑
const action = ref(process.env.VUE_APP_BASE_API + '/system/user/avatar')
const headers = ref({ Authorization: store.getters.token })
const onSuccess = (response) => {
  const { message, status, data } = response
  if (status === 300) {
    ElMessage({
      message: message,
      type: 'error'
    })
  } else if (status === 401) {
    ElMessageBox.alert('登录过期，请重新登录', '登录过期提醒', {
      confirmButtonText: 'OK',
      callback: () => {
        store.dispatch('app/logout')
      }
    })
  } else {
    userInfo.value.avatar = data.avatar
    store.commit('app/setUserInfo', userInfo.value)
  }
}

// 修改用户信息的逻辑
const userInfoRule = ref(updateUserInfoFormRule)
const userInfoForm = ref(null)
const updateUserInfoForm = ref({
  userNike: userInfo.value.userNike,
  sex: String(userInfo.value.sex),
  telephone: userInfo.value.telephone,
  email: userInfo.value.email,
  address: userInfo.value.address
})
// 用户信息修改的表单请求
const updateUserInfo = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      SetUserInfo(updateUserInfoForm.value)
        .then(data => {
          // 同步数据到客户端
          userInfo.value.userNike = updateUserInfoForm.value.userNike
          userInfo.value.sex = updateUserInfoForm.value.sex
          userInfo.value.telephone = updateUserInfoForm.value.telephone
          userInfo.value.email = updateUserInfoForm.value.email
          userInfo.value.address = updateUserInfoForm.value.address
          // 存储到内存中
          store.commit('app/setUserInfo', userInfo.value)
        })
    } else {
      return false
    }
  })
}

// 用户修改密码的逻辑
const passwordRule = ref(updatePwdFormRule)
const passwordForm = ref(null)
const updatePwdForm = ref({
  password: '',
  newPassword: '',
  truePassword: ''
})
// 用户修改密码的表单请求
const updatePassword = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      SetPassword(updatePwdForm.value)
        .then(data => {
          ElMessageBox.alert('密码已修改，请重新登录', '密码修改提醒', {
            confirmButtonText: 'OK',
            callback: () => {
              store.dispatch('app/logout')
            }
          })
        })
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.user-info-container{
  display: flex;
  justify-content: flex-start;
  flex-wrap:wrap;
  .user-info-card{
    min-width: 350px;
    margin-right: 20px;
    margin-bottom: 20px;
    .user-info-item{
      display: flex;
      justify-content: space-between;
      padding: 5px;
      line-height: 25px;
    }
  }
  .update-info-card{
    width: calc(100% - 400px);
    min-width: 350px;
  }
}
</style>
